import { HappyProvider } from '@ant-design/happy-work-theme';
import { Button, ConfigProvider, Flex } from 'antd';
import { useRef } from 'react';
import { useTranslation } from 'react-i18next';

const asciiCode = [
  `
  _    _      _ _         _ 
 | |  | |    | | |       | |
 | |__| | ___| | | ___   | |
 |  __  |/ _ \\ | |/ _ \\  | |
 | |  | |  __/ | | (_) | |_|
 |_|  |_|\\___|_|_|\\___/  (_)
                            
`,
  `
  _____ _              ____         _____              
 |_   _( )            / __ \       / ____|             
   | | |/ _ __ ___   | |  | |_____| (___  _ __  _   _  
   | |   | '_ \` _ \\  | |  | |______\\___ \\| '_ \\| | | | 
  _| |_  | | | | | | | |__| |      ____) | |_) | |_| | 
 |_____| |_| |_| |_|  \____/      |_____/| .__/ \__, | 
                                         | |     __/ | 
                                         |_|    |___/  
`,
  `
   ____   __  __ _ _               _____                        _ 
  / __ \\ / _|/ _| (_)             |  __ \\                      | |
 | |  | | |_| |_| |_ _ __   ___   | |__) |___  ___ ___  _ __ __| |
 | |  | |  _|  _| | | '_ \\ / _ \\  |  _  // _ \\/ __/ _ \\| '__/ _\` |
 | |__| | | | | | | | | | |  __/  | | \\ \\  __/ (_| (_) | | | (_| |
  \\____/|_| |_| |_|_|_| |_|\\___|  |_|  \\_\\___|\\___\\___/|_|  \\__,_|                                                         
`,

  `
  _____  _                                _    _____  _             
 |  __ \\| |                              | |  |  __ \\| |            
 | |__) | |_   _  __ _     __ _ _ __   __| |  | |__) | | __ _ _   _ 
 |  ___/| | | | |/ _\` |   / _\` | '_ \\ / _\` |  |  ___/| |/ _\` | | | |
 | |    | | |_| | (_| |  | (_| | | | | (_| |  | |    | | (_| | |_| |
 |_|    |_|\\__,_|\\__, |   \\__,_|_| |_|\\__,_|  |_|    |_|\\__,_|\\__, |
                  __/ |                                        __/ |
                 |___/                                        |___/ 
`,
  `
 __          __  _                             _                          
 \\ \\        / / | |                           | |                         
  \\ \\  /\\  / /__| | ___ ___  _ __ ___   ___   | |_ ___     _   _ ___  ___ 
   \\ \\/  \\/ / _ \\ |/ __/ _ \\| '_ \` _ \\ / _ \\  | __/ _ \\   | | | / __|/ _ \\
    \\  /\\  /  __/ | (_| (_) | | | | | |  __/  | || (_) |  | |_| \\__ \\  __/
     \\/  \\/ \\___|_|\\___\\___/|_| |_| |_|\\___|   \\__\\___/    \\__,_|___/\\___|
                                                                          
`,
];

export const MakeData = () => {
  const { t } = useTranslation('translation', { keyPrefix: 'oSpy' });
  const index = useRef(0);
  return (
    <HappyProvider>
      <Flex gap={24} justify="center" style={{ marginBlock: 24 }}>
        <Button
          onClick={() => {
            console.log(asciiCode[index.current++ % asciiCode.length]);
          }}
        >
          {t('console-output')}
        </Button>
        <Button
          onClick={() => {
            fetch(
              'https://registry.npmjs.org/@huolala-tech/page-spy-plugin-ospy',
            );
          }}
        >
          {t('network-request')}
        </Button>
        <Button
          onClick={() => {
            sessionStorage.setItem('O-Spy', 'Change storage demo');
          }}
        >
          {t('modify-storage')}
        </Button>
      </Flex>
    </HappyProvider>
  );
};
